<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="金西振">
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: absolute;
            top: 30px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div style="height: 1000px; background-color: orange;"></div>
    <div class="box">
        <div class="inner">0</div>
    </div>
<script>

    var box = document.querySelector('.box');
    var inner = document.querySelector('.inner');

    // 1、onclick 鼠标点击事件：单击，在click事件中出现双击的情况，会转化为两次单击事件
    // click 事件是按下鼠标松开时才会触发事件，包含 按下鼠标 和 松开鼠标 两个动作
    inner.onclick = function(ev){
        // console.dir(this);//在鼠标事件中指的是绑定事件的元素
        // ev 鼠标事件对象，事件对象中包含很多信息：点击的位置、目标元素等内容
        console.dir(ev);
        // ev.target 是触发事件的目标元素
        // console.dir(ev.target);
        // console.log(ev.type);//事件名称 click

        // 鼠标的位置: 坐标
        // 相对于整个文档的位置
        // console.log(ev.pageX, ev.pageY);
        // 相对可视页面的位置: pageY = clientY + scrollTop
        // console.log(ev.clientX, ev.clientY);

        // 相对点击元素的位置
        // console.log(ev.offsetX, ev.offsetY);

        // 相对于整个电脑屏幕的位置
        // console.log(ev.screenX, ev.screenY);

    }
    // 2、鼠标按下触发的事件
    // inner.onmousedown = function(){
    //     console.log('鼠标按下');
    // }

    // // 3、鼠标松开触发的事件
    // inner.onmouseup = function(){
    //     console.log('鼠标松开');
    // }

    // // 4、双击鼠标触发的事件
    // inner.ondblclick = function(){
    //     console.log('双击');
    // }

    // 5、鼠标移动的时候触发的事件
    // document.onmousemove = function(ev){
    //     console.log(ev.pageX, ev.pageY);
    //     inner.style.top = ev.pageY + 'px';
    //     inner.style.left = ev.pageX + 'px';
    // }

    inner.onmousedown = function(ev1){
        inner.style.cursor = 'move';
        // console.log(ev1.offsetX, ev1.offsetY);
        // 当鼠标点下去的一瞬间，偏移量已经确定了
        var offsetX = ev1.offsetX;
        var offsetY = ev1.offsetY;
        // 当在inner中按下鼠标的时候，才去触发移动的事件
        document.onmousemove = function(ev){
            // 停留在被点击元素任意的位置
            inner.style.left = ev.pageX - offsetX + 'px';
            inner.style.top = ev.pageY - offsetY + 'px';
            // 在中间位置
            // inner.style.top = ev.pageY - 50 + 'px';
            // inner.style.left = ev.pageX - 50 + 'px';
        }
    }

    inner.onmouseup = function(){
        inner.style.cursor = 'auto';
        document.onmousemove = null;
    }

    // 6、移入和移出
    // 不支持冒泡
    // box.onmouseenter = function(ev){
    //     console.log('enter 鼠标进来', ev);
    // }
    // box.onmouseleave = function(){
    //     console.log('leave 鼠标出去');
    // }
    // 支持冒泡
    box.onmouseover = function(ev){
        console.log('over 鼠标进来---', ev);
    }
    box.onmouseout = function(){
        console.log('out 鼠标出去');
    }

    // 7、鼠标滚轮滚动的时候触发
    document.onmousewheel = function(ev){
        console.log(ev);
        // 垂直滚动：向下滚动返回正值，向上滚动返回负值
        console.log(ev.deltaY);
    }

    
</script>
</body>
</html>